<template>
	<!-- 企业详情 -->
	<view class="companyinfo">
		<view class="company-top">
			<view class="company-t1">
				<view class="bianji" @click="editCommpany">
					<image src="../../../../static/icon/bianji.png"></image>
				</view>
				<view class="t1-img">
					<image v-if="info.imgs==''||info.imgs==null" src="../../../../static/infor/com.png"></image>
					<image :src="info.imgs"></image>
				</view>
				<view class="t1-text">
					<view class="text1">{{info.name || '暂无资料'}}</view>
					<view class="text2">非公有制经济组织</view>
				</view>
			</view>
			<view class="company-t2">
				<view class="t2-item">
					<view class="item1">法定代表人</view>
					<view class="item3">{{info.legalName || '暂无资料'}}</view>
				</view>
				<view class="t2-item">
					<view class="item1">企业类型</view>
					<view class="item2">{{info.businessScope || '暂无资料'}}</view>
				</view>
				<view class="t2-item">
					<view class="item1">批准日期</view>
					<view class="item2">{{info.createTime ? info.createTime.substr(0,10) : '暂无资料'}}</view>
				</view>
			</view>
			<view class="company-t3">法定代表人证件号码：<text>{{info.legalIdCard || '暂无资料'}}</text></view>
			<view class="company-t3">企业地址：<text>{{info.address || '暂无资料'}}</text></view>
		</view>
		<view class="company-head">
			<view class="head-item">
				<view class="item-1">企业年度计划</view>
				<view class="item-2">500000万元</view>
			</view>
			<view class="head-item">
				<view class="item-1">登记收入</view>
				<view class="item-2">500000万元</view>
			</view>
			<view class="head-item">
				<view class="item-1">登记利润</view>
				<view class="item-2">500000万元</view>
			</view>
			<view class="head-item">
				<view class="item-1">完成率</view>
				<view class="item-2">8.7%</view>
			</view>
		</view>
		<view class="company-content">
			<view class="con-head">
				<view class="head-1">企业台帐</view>
				<view class="head-2">2021年</view>
			</view>
			<view class="con-head2">
				<view class="head2-item">
					<view class="item1">企业年度计划</view>
					<view class="item2">3999999万元</view>
				</view>
				<view class="head2-item">
					<view class="item1">登记收入</view>
					<view class="item3">3999999万元</view>
				</view>
			</view>
			<view class="con-head2">
				<view class="head2-item">
					<view class="item1">登记利润</view>
					<view class="item4">3999999万元</view>
				</view>
				<view class="head2-item">
					<view class="item1">完成率</view>
					<view class="item5">8.8%</view>
				</view>
			</view>
		<!-- 	<view class="company-conttt">
				<view class="conttt1" v-for="(item,index) in list" :key="index">
					<view class="conttt-item1">{{ item.month }}月</view>
					<view class="conttt-item2">
						<view class="item2-1">收入:{{ item.shouRu }}万</view>
						<view class="item2-1">利润:{{ item.liRun }}万</view>
					</view>
					<view class="conttt-item3">支出:{{ item.zhiChu }}万</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						month: '01',
						shouRu: '22999',
						liRun: '20010',
						zhiChu: '20100'
					},
					{
						month: '02',
						shouRu: '22999',
						liRun: '20010',
						zhiChu: '20100'
					},
					{
						month: '03',
						shouRu: '22999',
						liRun: '20010',
						zhiChu: '20100'
					}
				],
				info: {}
			}
		},
		methods: {
			editCommpany() {
				uni.navigateTo({
					url: '../Company-edit/Company-edit?id='+this.info.id
				})
			},
		},
		onLoad() {
			this.info = JSON.parse(uni.getStorageSync("info"))
			console.log(this.info)
		}
	}
</script>

<style lang="scss" scoped>
	.companyinfo {
		padding: 20rpx;
		background-color: #f5f6f7;
		min-height: 100vh;

		.company-top {
			padding: 20rpx;
			background-color: #fff;
			border-radius: 10rpx;
			box-shadow: 3px 3px 3px #eee;

			.company-t1 {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				position: relative;

				.t1-img {
					width: 120rpx;
					height: 120rpx;
					margin-right: 20rpx;
				}

				.t1-text {
					.text1 {
						color: #000;
						font-size: 34rpx;
					}

					.text2 {
						color: #007AFF;
						background-color: #dbeefc;
						padding: 4rpx 10rpx;
						border-radius: 10rpx;
					}
				}

				.bianji {
					position: absolute;
					top: 6rpx;
					right: 6rpx;
					width: 30rpx;
					height: 30rpx;
				}
			}

			.company-t2 {
				font-size: 28rpx;
				margin: 20rpx 0;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.t2-item {
					font-size: 26rpx;
					text-align: center;
					width: 33%;

					.item1 {
						color: #999;
					}

					.item2 {
						color: #333;
					}

					.item3 {
						color: #007AFF;
					}
				}
			}

			.company-t3 {
				color: #999;
				font-size: 28rpx;

				text {
					display: inline-block;
					margin-left: 15rpx;
				}
			}
		}

		.company-head {
			padding: 20rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			flex-wrap: wrap;
			width: 100%;
			border-radius: 10rpx;
			background-color: #fcf1e2;
			margin: 20rpx 0;

			.head-item:nth-child(1) {
				.item-2 {
					color: #007AFF;
				}
			}

			.head-item:nth-child(2) {
				.item-2 {
					color: #f0ad4e;
				}
			}

			.head-item:nth-child(3) {
				.item-2 {
					color: #6ea76c;
				}
			}

			.head-item:nth-child(4) {
				.item-2 {
					color: #DD524D;
				}
			}

			.head-item {
				width: 50%;
				text-align: center;
				margin: 20rpx 0;

				.item-1 {
					color: #333;
					font-size: 28rpx;
					margin-bottom: 10rpx;
				}

				.item-2 {
					font-size: 30rpx;
					font-weight: 600;
				}
			}
		}

		.company-content {
			margin: 20rpx 0;

			.con-head {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;

				.head-1 {
					color: #000;
					font-weight: 600;
					font-size: 35rpx;
				}

				.head-2 {
					color: #007AFF;
					font-size: 34rpx;
					font-weight: 600;
				}
			}

			.con-head2 {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.head2-item:nth-child(1) {
					text-align: left;
				}

				.head2-item:nth-child(2) {
					text-align: right;
				}

				.head2-item {
					font-size: 28rpx;
					margin-bottom: 20rpx;
					width: 50%;

					.item1 {
						color: #333;
					}

					.item2 {
						color: #007AFF;
					}

					.item3 {
						color: #F0AD4E;
					}

					.item4 {
						color: #4CD964;
					}

					.item5 {
						color: #DD524D;
					}
				}
			}

			.company-conttt {
				font-size: 28rpx;

				.conttt1 {
					display: flex;
					justify-content: space-between;
					align-items: center;
					background-color: #fff;
					box-shadow: 3px 3px 3px #eee;
					margin-bottom: 20rpx;
					border-radius: 10rpx;
					padding: 20rpx;

					.conttt-item1 {
						color: #007AFF;
						width: 10%;
					}

					.conttt-item2 {
						color: #999;
						width: 40%;
						margin: 10rpx 0;

						.item2-1 {}
					}

					.conttt-item3 {
						width: 40%;
						color: #999;
					}
				}

			}
		}
	}
</style>
